<template>
  <div class="index" id="index">
    <!-- 顶部导航栏,默认隐藏 -->
    <div v-show="scroll >= 300" class="index_header"
      style="width:100%;font-weight:bold;line-height:4.6rem;text-align:center;font-size:1.6rem;position:fixed;top:0;background-color:#fff;z-index:1000;transition:0.5s">
      OnePet
    </div>
    <!-- 头部背景 小丸子+logo -->
    <div class="header">
      <img src="../assets/petLogo.png" alt="">
    </div>
    <!-- 上门喂猫,遛狗 -->
    <div class="gohome">
      <div class="feed-cat">
        <img src="../assets/img/cat_index.png" alt="">
        <span>上门喂猫</span>
      </div>
      <div class="walk-dog">
        <img src="../assets/img/dog_index.png" alt="">
        <span>上门遛狗</span>
      </div>
    </div>
    <!-- 累计服务 -->
    <div class="serve">
      <div class="serve-left">
        <img src="../assets/img/fuwu.png" alt="">
      </div>
      <div class="serve-right">
        <div>
          <span>已累计服务宠物</span>
          <span>21,239</span>
          <span>截止{{ endDate }}</span>
        </div>
      </div>
    </div>
    <!-- 伴宠日志 -->
    <div class="diary">
      <span>伴宠日志</span>
      <span>
        <router-link :to="{ path: '/diaryList' }">查看全部&nbsp;></router-link>
      </span>
    </div>
    <!-- 日志卡片 -->
    <DiaryCard></DiaryCard>
    <!-- 点击文字,跳转至所有日志列表 -->
    <div class="godiaries">
      <router-link :to="{ path: '/diaryList' }">查看更多伴宠日志</router-link>
    </div>
  </div>
</template>

<script>
import DiaryCard from "../components/DiaryCard.vue"

export default {
  name: 'HomeView',
  data() {
    return {
      scroll: ""//滑动距离
    }
  },
  computed: {
    endDate() {
      let date = new Date()
      return this.$moment(date).format("YYYY-MM-DD")
    }
  },
  methods: {
    format(date) {
      let newDate = this.$moment(date).format("YYYY-MM-DD hh:mm:ss");
      return newDate
    },
    // 监听滚动条事件,显示头部标题
    handleScroll() {
      this.scroll = document.documentElement.scrollTop || document.body.scrollTop
    }
  },
  components: {
    DiaryCard
  },
  mounted() {
    window.addEventListener("scroll", (e) => {
      this.handleScroll()
    })
  }
}
</script>

<style lang="scss" scoped>
.index {
  position: relative;
  background-color: white;
  width: 37.5rem;

  //头部
  .header {
    width: 100%;
    height: 22rem;
    background-image: url("../assets/img/girl.png");
    background-size: 8rem;
    background-repeat: no-repeat;
    background-position: 50% 70%;
    background-color: #fde062;

    img {
      position: absolute;
      width: 30%;
      // height: 25%;
      top: 10rem;
      left: 0;
    }


  }

  // 上门喂猫
  .gohome {
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
    background-color: #fff;
    position: absolute;
    left: 1.75rem;
    top: 18rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 90%;
    height: 13rem;
    border-radius: 1.5rem;

    .feed-cat,
    .walk-dog {
      width: 50%;
      height: 70%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      img {
        display: block;
        width: 6rem;
        margin-bottom: 1rem;
      }

      span {
        display: block;
        font-size: 1.6rem;
        font-weight: bold;
        color: #36343c;
      }
    }

    .feed-cat {
      border-right: 1px dashed #ccc;
    }
  }

  .serve {
    width: 100%;
    height: 22rem;
    display: flex;

    .serve-left {
      width: 50%;

      img {
        width: 6rem;
        padding-top: 10.5rem;
        padding-left: 10rem;
      }
    }

    .serve-right {
      width: 50%;
      padding-top: 10.5rem;
      text-align: left;

      span {
        display: block;
        margin: 1rem;
        font-size: 1.6rem;
        color: gray;
      }

      span:nth-child(2) {
        font-size: 2.4rem;
        color: red;
        font-family: "华光彩云_cnki";
      }
    }
  }

  .diary {
    // width: 100%;
    height: 5rem;
    display: flex;
    justify-content: space-between;

    span {
      display: block;
      line-height: 5rem;
    }

    span:first-child {
      font-weight: bold;
      font-size: 2.25rem;
      color: #36343c;
      text-align: start;
      padding-left: 2rem;
    }

    span:last-child {
      font-size: 1.5rem;
      color: grey;
      text-align: end;
      padding-right: 2rem;
    }
  }

  // 底部跳转文字
  .godiaries {
    height: 8rem;
    text-align: center;
    // margin-bottom: 2rem;
    // background-color: red;
  }
}
</style>
